<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE>
<html>
<head>
<base href="<%=basePath%>">
<jsp:include page="/static/iframe/import/_meta.jsp"></jsp:include>
<jsp:include page="/static/iframe/import/_header.jsp"></jsp:include>
<title>部门</title>
<link href="static/iframe/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="static/iframe/bootstrap/bootstrap-table/css/bootstrap-table.min.css" rel="stylesheet">
<link href="static/iframe/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
</head>
<style type="text/css">
.fixed-table-body {
	height: auto;
}

.btn-group-vertical>.btn, .btn-group>.btn {
	height: 35px;
}

a:hover {
	text-decoration: none;
}
#toolbarDiv{
position:relative;bottom:-16px;
}
#toolbar{
position:relative;
}
.layui-breadcrumb a{
vertical-align:middle;
}
</style>
<body>
		<div class="x-nav">
		<span class="layui-breadcrumb" style="visibility: visible;"><a> <cite> 
			首页<span class="layui-box">&gt;</span></cite></a> <a> <cite> 
			系统管理<span class="layui-box">&gt;</span></cite></a>  <a>
				<cite>用户管理</cite>
		</a>
		</span> <a class="btn btn-sm btn-success"
			style="line-height: 1.6em; margin-top:3px; float: right"
			href="javascript:location.replace(location.href);" title="刷新"> <i
			class="glyphicon glyphicon-refresh" style="line-height:20px"></i></a>
	</div>
	<div class="x-body">
		<div class="row">
			<form id="formSearch" class="form-horizontal">
				<div class="col-md-2 col-lg-2 col-sm-2 col-xs-2 col-md-offset-2 col-lg-offset-2  col-sm-offset-1  col-xs-offset-1">
					<label class="control-label"></label>
				</div>
			
			</form>
		</div>		
		<div id="toolbar">
		   <div id="toolbarDiv">
		<a href="javascript:;"
				onclick="organization_add('添加部门','organization/add','400','250')"
				class="btn btn-primary radius btn-sm"><i
				class="glyphicon glyphicon-plus"></i> 添加</a>
			</div>
		</div>
		<table id="organizationTable" style="white-space: nowrap;"
			class="table table-hover" data-pagination="true"
			data-toolbar="#toolbar" 
			data-content-type="application/x-www-form-urlencoded"
			 data-undefined-text=" ">
			<thead>
				<tr>
					<th data-width="80" data-align="center" data-field="id" data-align="center">编号</th>
					<th data-width="100"  data-align="center" data-field="organizationName">部门名称</th>
					<th data-width="90" data-align="center"  data-formatter="fmtCreateTime" data-field="createDate">创建时间</th>
					<th data-width="100" data-align="center" data-field="pid">上级编号</th>
					<th data-width="100" data-align="center" data-formatter="operation">操作</th>
				</tr>
			</thead>
			<tbody>
			</tbody>
		</table>

	</div>		
</body>
<!--请在下方写此页面业务相关的脚本-->
<jsp:include page="/static/iframe/import/_footer.jsp"></jsp:include>
<script type="text/javascript" src="static/iframe/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="static/iframe/bootstrap/bootstrap-table/js/bootstrap-table.min.js"></script>
<script type="text/javascript" src="static/iframe/bootstrap/bootstrap-table/js/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript" src="static/iframe/bootstrap/bootstrap-treeview/js/bootstraptable-treeview.js"></script>
<script type="text/javascript" src="static/iframe/x-admin/lib/moment.js"></script>
<script type="text/javascript" src="static/plugins/window/layershow.js"></script>

<c:if test="${fn:contains(userSession.resourceList, 'user/update')}">
	<script type="text/javascript">
				$.canEdit = true;
			</script>
</c:if>
<c:if test="${fn:contains(userSession.resourceList, 'user/delete')}">
	<script type="text/javascript">
				$.canDelete = true;
			</script>
</c:if>
<c:if test="${fn:contains(userSession.resourceList, 'user/add')}">
	<script type="text/javascript">
				$.canInsert = true;
			</script>
</c:if>
<script type="text/javascript">
			//初始化表格
			function initTable() {
				//先销毁表格  
				$("#organizationTable").bootstrapTable('destroy');
				//初始化表格,动态从服务器加载数据  
				$("#organizationTable").bootstrapTable({
					method: "post", //使用get请求到服务器获取数据  
					url: "organization/tableView", //获取数据的Servlet地址  
					dataType: "json",
					treeView: true ,
					treeId : "id",
					treeField : "organizationName",
					striped: true, //表格显示条纹  
				 //记录数可选列表  
					//search: true, //是否启用查询
					//searchOnEnterKey : true, //设置为 true时，按回车触发搜索方法，否则自动触发搜索方法
					showColumns: true, //显示下拉框勾选要显示的列  
					showRefresh: true, //显示刷新按钮 
					uniqueId : "id", //每一行的唯一标识，一般为主键列
					clickToSelect: false, //是否启用点击选中行
					sidePagination: "server", //表示服务端请求  
					paginationLoop: false,
					//设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder  
					//设置为limit可以获取limit, offset, search, sort, order  
					queryParamsType: "limit",
					icons: {
						refresh: 'glyphicon-repeat',
						toggle: 'glyphicon-list-alt',
						columns: 'glyphicon-list'
					},
					queryParams: function queryParams(params) { //设置查询参数  
						var param = {
							offset: params.offset,
							limit: params.limit,
							sort: params.sort,
							order: params.order,
							realName: $.trim($("#realname").val())
							} 
						return param;
					},
					onLoadError: function() { //加载失败时执行  
						layer.msg("加载数据失败", {
							time: 1500,
							icon: 2
						});
					}
				});
			}
			
			//value: 所在collumn的当前显示值，
			//row:整个行的数据 ，对象化，可通过.获取
			//表格-操作 - 格式化 
			function operation(value, row, index) {
				var str = "&nbsp;";
					str += "&nbsp;&nbsp;"
					//if($.canEdit){
						str += "<a style='text-decoration:none' onClick=user_update('编辑','organization/selectOrganizationById/"+ row.id+ "','450','480')  title='编辑'  href='javascript:;'  class='ml-5'><i class='glyphicon glyphicon-edit'></i></a>"; 
					//}
					
					str += "&nbsp;&nbsp;&nbsp;&nbsp;"
					//if($.canDelete){
						str += "<a title='删除' href='javascript:;' onclick=deleteOrganization('organization/delete/"
							+ row.id+ "') class='ml-5' style='text-decoration:none'><i class='glyphicon glyphicon-trash'></i></a>";
					//}
					return str;
			}
			
			$(function(){
				//初始化表格
				initTable();
				//当点击查询按钮的时候执行  
				$("#userSearch").bind("click", initTable);
				
			});
			
			/*用户-编辑*/
			function user_update(title, url, w, h) {
				layer_show(title, url, w, h);
			}
			
			/*密码-修改*/
			function update_password(title, url, w, h) {
				layer_show(title, url, w, h);
			}
			
			/*-添加*/
			function organization_add(title, url, w, h) {
				layer_show(title, url, w, h);
			}
			
			/*格式化薪资*/
			function fmtSalary(value,row,index){
				return value.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");
			}
			/*格式化电话号码*/
			function fmtTelePhone(value,row,index){
				return value.replace(/(\d{3})(\d{4})/,"$1-$2-");
			}
			/*格式创建时间*/
			 function fmtCreateTime(value, row, index) {
				return moment(value).format('YYYY-MM-DD HH:mm:ss');
			} 
			
			
	//删除 
	function deleteOrganization(url) {
		layer.confirm('是否删除该部门?', {
			btn : [ '是', '否' ]
		//按钮
		}, function() {
			$.post(url, function(result) {
				//刷新 
				$("#organizationTable").bootstrapTable('refresh');
				//提示消息 
				if (result.flag) {
					layer.msg(result.msg, {
						icon : 1,
						time : 2000
					//提示时间 (默认3秒)
					});
				} else {
					layer.msg(result.msg, {
						icon : 2,
						time : 2000
					});
				}
			})

		});
	}
			
		</script>
</html>